<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="UTF-8">
        <title>列表</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">图书归还管理</a>
                <a><cite>图书归还列表</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text"  name="title" placeholder="请输入图书标题" autocomplete="off"  class="layui-input">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                        <i class="layui-icon">&#xe615;</i></button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-body ">
                            <table class="layui-hide" id="test" lay-filter="test"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script th:inline="none">
        layui.use(['table','form','upload'],function() {
            var table = layui.table;
            var form = layui.form;

            table.render({
                  id: 'listReload'
                , elem: '#test'
                , method: "get"
                , url: '/api/admin/book-reback/list'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , page: true
                , limit: 10
                , limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 300]
                , toolbar: '#toolbarDemo'
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.msgcode, //解析接口状态
                        "msg": res.data == null ? "无数据展示" : res.msg, //解析提示文本
                        "count": res.data == null ? 0 : res.data.total, //解析数据长度
                        "data": res.data == null ? null : res.data.records //解析数据列表
                    };
                }, request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    , limitName: 'rows' //每页数据量的参数名，默认：limit
                }, cols: [[
                    {title: '序号', align: 'center', type: "numbers"},
                    {title: '图书标题', field: 'title', align: 'center'},
                    {title: '用户名称', field: 'username', align: 'center'},
                    {title: '归还时间', field: 'rebackTime', align: 'center'}
                ]]
            });

            //监听提交
            form.on('submit(sreach)', function(data){
                //上述方法等价于
                table.reload('listReload', {
                    where: { //设定异步数据接口的额外参数，任意设
                        title: data.field.title
                    },page: {
                        curr: 1 //重新从第 1 页开始
                    }
                }); //只重载数据
                return false;
            });

            //监听头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'add'://新增用户
                        xadmin.open('新增', '/api/admin/book/add');
                        break;
                    case 'excel'://导入
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    xadmin.open('修改','/api/admin/book-lend/edit?id='+data.bookId);
                } else if(obj.event === 'del'){
                    layer.confirm('确定要归还图书吗？',{
                        btn: ['确定', '取消']
                    }, function () {
                        $.ajax({
                            url: "/api/admin/book-lend/rebackId",
                            type: "post",
                            data: {'id':data.id},
                            dataType : "json",
                            success: function (data) {
                                if (data.success) {
                                    layer.alert(data.msg, {
                                        icon : 6
                                    }, function() {
                                        location.reload();
                                    });
                                } else {
                                    layer.alert(data.msg, {
                                        icon : 2
                                    });
                                }
                            },error: function (XmlHttpRequest, textStatus, errorThrown) {
                                layer.msg('error!', {icon: 2, time: 2000});
                            }
                        });
                    })
                }
            });
        })
    </script>

</html>
